<template>
  <view class="container">
    <!-- 顶部背景和导航 - 固定定位 -->
    <view class="fixed-header">
      <image src="/static/image/图层 1.png" class="bg-image"></image>
      <view class="title">
        <view class="back-arrow" @click="goBack"></view>
        <view>我的车辆</view>
        <view></view>
      </view>
    </view>
    
    <!-- 页面内容区域 -->
    <view class="page-content">
      <!-- 内容区域 -->
      <view class="content">
        <!-- 无车辆时的空状态 -->
        <view class="empty-state" v-if="cars.length === 0">
          <image src="/static/image/car-empty.png" class="empty-image"></image>
          <text class="empty-text">暂无车辆信息</text>
          <view class="add-btn" @click="goToAddCar">
            <text class="add-icon">+</text>
            <text>添加车辆</text>
          </view>
        </view>

        <!-- 有车辆时的列表 -->
        <view class="car-list" v-else>
          <view class="car-item" v-for="(car, index) in cars" :key="index">
            <view class="car-info">
              <text class="car-model">车型：{{ car.model }}</text>
              <text class="car-plate">车牌：{{ car.plate }}</text>
            </view>
            <view class="car-actions">
              <view class="action-item">
                <checkbox :value="car.isDefault" :checked="car.isDefault" @change="toggleDefault(index)" />
                <text>设为默认车辆</text>
              </view>
              <view class="action-item">
                <checkbox :value="false" @change="deleteCar(index)" />
                <text>删除</text>
              </view>
            </view>
          </view>

          <!-- 添加车辆按钮 -->
          <view class="add-car-btn" @click="goToAddCar">
            <text class="add-icon">+</text>
            <text>添加车辆</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 车辆数据
const cars = ref([
  {
    model: '奔驰-GR',
    plate: '豫M35468',
    isDefault: true
  },
  {
    model: '奔驰-GR',
    plate: '豫M35422',
    isDefault: false
  }
])

// 返回上一页
const goBack = () => {
  uni.navigateBack({
    delta: 1,
    fail: () => {
      uni.switchTab({
        url: '/pages/my/my'
      })
    }
  })
}

// 跳转到添加车辆页面
const goToAddCar = () => {
  uni.navigateTo({
    url: '/pages/my/mycar/addcar/addcar'
  })
}

// 切换默认车辆
const toggleDefault = (index) => {
  // 先取消所有车辆的默认状态
  cars.value.forEach(car => {
    car.isDefault = false
  })
  // 设置当前车辆为默认
  cars.value[index].isDefault = true
}

// 删除车辆
const deleteCar = (index) => {
  uni.showModal({
    title: '确认删除',
    content: `确定要删除车牌号为 ${cars.value[index].plate} 的车辆吗？`,
    success: (res) => {
      if (res.confirm) {
        cars.value.splice(index, 1)
        uni.showToast({
          title: '删除成功',
          icon: 'success',
          duration: 2000
        })
      }
    }
  })
}
</script>

<style scoped>
.container {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 固定头部区域 */
.fixed-header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  height: 200px;
}

.bg-image {
  width: 100%;
  height: 200px;
}

.title {
  padding: 15px;
  width: 100%;
  display: flex;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1001;
  justify-content: space-between;
  align-items: center;
}

.title view:nth-child(2) {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
}

.title view:nth-child(3) {
  width: 24px;
  height: 24px;
}

.back-arrow {
  width: 40px;
  height: 40px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-arrow::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(-45deg);
  top: 50%;
  left: 50%;
  margin-top: -6px;
  margin-left: -6px;
  transition: all 0.3s ease;
}

/* 页面内容区域 */
.page-content {
  width: 100%;
  margin-top: 200px;
  position: relative;
  z-index: 10;
  min-height: calc(100vh - 200px);
}

/* 内容区域 */
.content {
  padding: 20px 15px;
  position: relative;
  z-index: 10;
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60vh;
  background-color: #fff;
  border-radius: 12px;
  padding: 40px 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.empty-image {
  width: 120px;
  height: 120px;
  margin-bottom: 20px;
}

.empty-text {
  font-size: 16px;
  color: #999;
  margin-bottom: 30px;
}

.add-btn {
  background-color: #007AFF;
  color: #fff;
  border-radius: 25px;
  padding: 12px 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.add-btn:active {
  background-color: #0056CC;
  transform: scale(0.98);
}

.add-icon {
  font-size: 20px;
  font-weight: bold;
}

/* 车辆列表样式 */
.car-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.car-item {
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.car-item:active {
  transform: scale(0.98);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

.car-info {
  margin-bottom: 15px;
}

.car-model {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.car-plate {
  display: block;
  font-size: 16px;
  color: #666;
}

.car-actions {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #f0f0f0;
  padding-top: 15px;
}

.action-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #666;
}

/* 复选框样式 */
::v-deep .uni-checkbox-input {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

::v-deep .uni-checkbox-input.uni-checkbox-input-checked {
  background-color: #007AFF;
  border-color: #007AFF;
}

::v-deep .uni-checkbox-input.uni-checkbox-input-checked::before {
  color: #fff;
  font-size: 14px;
}

/* 底部添加按钮 */
.add-car-btn {
  background-color: #007AFF;
  color: #fff;
  border-radius: 25px;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  margin-top: 20px;
  transition: all 0.3s ease;
}

.add-car-btn:active {
  background-color: #0056CC;
  transform: scale(0.98);
}
</style>